<template>
	<div class="custom_number">
		<button type="button" @click="editNumber(-1)" :disabled="customNumber<2">-</button>
		<input type="number" :value="customNumber" disabled />
		<button type="button" @click="editNumber(1)" :disabled="customNumber>=5">+</button>
	</div>
</template>
<script>
	export default{
		name:"CustomNumber",
		props:["num", "index", "sindex"],
		data:function(){
			return{
				customNumber:0
			}
		},
		mounted:function(){
			this.$set(this, "customNumber", this.num);
		},
		methods:{
			editNumber(n){
				let num = this.customNumber+n < 2 ? 1 : this.customNumber+n,
					that = this;
				this.$set(this, "customNumber", num);
				this.$emit("setData", (vm) => {
					let cg = [].concat(vm.cartGoods);
					cg[that.index].goods[that.sindex].buyNum = num;
					vm.$emit("setCartGoods", cg);
					that.$emit("getSelectedGoods");
					that.$store.commit("setCartGoods", vm.cartGoods);
				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.custom_number{
		margin:10/@base 0 0;
		display:flex;
		input, button{
			border: 0;
       		outline: none;
       		background-color: #efefef;
       		-webkit-appearance: none;
		}
		button{
			width:30%;
			border:0;
			padding:5/@base 0;
			font-size: 24/@base;
			background-color: #fff;
			&:disabled{
				color:#ccc;
			}
		}
		input{
			width:40%;
			text-align: center;
			border:1/@base solid #efefef;
		}
	}
</style>